<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>Has published books:</p>
    <span>{{ publishedBooksMessage }}</span>

    <button @click="show">来吧，展示</button>
</div>

<script>
    const {createApp, reactive , computed} = Vue

    const author = reactive({
        name: 'John Doe',
        books: [
            'Vue 2 - Advanced Guide',
            'Vue 3 - Basic Guide',
            'Vue 4 - The Mystery'
        ]
    })

    // 一个计算属性 ref
    const publishedBooksMessage = computed(() => {
        return author.books.length > 0 ? 'Yes' : 'No'
    })

    function show() {
        //这个会报警告，不能直接修改计算属性的值
        publishedBooksMessage.value = 222
        console.log(publishedBooksMessage.value)
    }

    createApp({
        setup() {
            return {
                author,
                publishedBooksMessage,
                show
            }
        }
    }).mount('#app')
</script>
</body>
</html>